<!-- 人员兼职部门 编辑页面 -->
<template>
  <el-dialog
    v-dialog-drag
    :title="title"
    :visible.sync="open"
    class="dialogStyleSmall"
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      class="formItemCss"
      :model="userPartDeptFrom"
      :rules="rules"
      label-width="80px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="兼职部门" prop="partDeptId">
            <treeselect
              v-model="userPartDeptFrom.partDeptId"
              class="treeselectStyle"
              :options="deptOptions"
              :normalizer="normalizer"
              placeholder="请选择兼职部门"
              no-options-text="暂无部门信息"
              clear-value-text=""
              style="width:100%"
              @input="changePartDeptId"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="数据范围" prop="dataScope">
            <el-select v-model="userPartDeptFrom.dataScope" size="medium" style="width:100%">
              <el-option
                v-for="dict in dataScopeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
            <span style="color:red;padding:0px;margin:0px">该兼职部门拥有菜单的默认数据权限</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="岗位" prop="partPostId">
            <label slot="label" v-html="'岗&emsp;&emsp;位'" />
            <el-select
              v-model="userPartDeptFrom.partPostId"
              filterable
              default-first-option
              placeholder="请选择岗位"
              style="width:100%"
              size="medium"
            >
              <el-option
                v-for="item in postOptions"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="状态" prop="status">
            <label slot="label">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态</label>
            <el-radio-group v-model="userPartDeptFrom.status" size="medium">
              <!-- <el-radio label="0">正常</el-radio>
              <el-radio label="1">停用</el-radio> -->
              <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">
                {{ dict.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" type="primary" :disabled="btnDisabled" @click="submitFrom('form')">保 存</el-button>
    </div>
  </el-dialog>
</template>
<script>
// 兼职部门树的加载
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { addUserPartDept, updateUserPartDept, checkPartDeptIdUnique } from '@/api/system/user/user-part-dept'
// 获取部门菜单树 (song)
import { selectAllCompanyDeptTree, getDeptByDeptId } from '@/api/system/dept'
// 获取岗位表list信息
import { listPost } from '@/api/system/post'

export default {
  components: { Treeselect },
  data() {
    const checkPartDeptId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('不能为空'))
      } else {
        const partId = this.userPartDeptFrom.partId
        const userId = this.userPartDeptFrom.userId
        const partDeptId = value
        checkPartDeptIdUnique(partId, userId, partDeptId).then(response => {
          if (response.data === '1') {
            return callback(new Error('已经存在'))
          } else {
            callback()
          }
        })
      }
    }
    // 查看选择的归属部门是不是分公司 (song)
    const validSubCompany = (rule, value, callback) => {
      this.getDeptType(value)
      if (this.deptType === '2') {
        return callback(new Error('所属部门不能选择分公司'))
      } else if (this.deptType === '0') {
        return callback(new Error('所属部门不能选择公司'))
      } else {
        callback()
      }
    }
    return {
      // 弹框标题
      title: '',
      // 弹框开关
      open: false,
      deptOptions: [],
      normalizer(node) {
        // 去掉children=[]的children属性
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.deptId,
          label: node.deptName,
          children: node.children
        }
      },
      // 岗位list
      postOptions: [],
      // 人员兼职部门
      statusOptions: [],
      // 存放公共的人员id；
      objectUserId: '',
      // 人员兼职部门对象
      userPartDeptFrom: {
        // 主键Id
        partId: '',
        // 人员Id
        userId: '',
        // 兼职部门id
        partDeptId: null,
        // 数据权限类型
        dataScope: '',
        // 兼职岗位
        partPostId: '',
        // 状态
        status: '0'
      },
      // 按钮控制
      btnDisabled: false,
      // 数据范围选项
      dataScopeOptions: [],
      // from表单验证
      rules: {
        partDeptId: [
          // 自定义验证方式 (song)
          { required: true, validator: checkPartDeptId, trigger: 'input' },
          { required: true, validator: validSubCompany, trigger: 'input' }
        ],
        dataScope: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getDicts('role_data_scope').then(response => {
      this.dataScopeOptions = response.data.rows
    })
    // 人员兼职部门状态信息
    this.getDicts('sys_normal_disable').then(response => {
      this.statusOptions = response.data.rows
    })
  },
  methods: {
    // 获取公司类型 (song)
    getDeptType(value) {
      getDeptByDeptId(value).then(res => {
        if (res) {
          this.deptType = res.data.deptType
        }
      })
    },
    changePartDeptId(val) {
      this.$nextTick(() => {
        this.$refs.form.validateField('partDeptId')
      })
    },
    // 兼职部门添加调用的方法
    showViewAdd(userId) {
      this.title = '新增人员兼职部门'
      this.open = true
      this.emptFrom()
      this.objectUserId = userId
      this.userPartDeptFrom.userId = userId
      this.selectDeptTree()
      this.selectPostOptions()
    },
    // 兼职部门编辑调用的方法
    showViewEdit(row) {
      this.title = '修改人员兼职部门'
      this.open = true
      this.emptFrom()
      const { userId, partId, partDeptId, dataScope, partPostId, status } = row
      this.objectUserId = userId
      this.userPartDeptFrom = { ...this.userPartDeptFrom, userId, partId, partDeptId, dataScope, partPostId, status }
      this.selectDeptTree()
      this.selectPostOptions()
    },
    // 清空表格
    emptFrom() {
      this.userPartDeptFrom.userId = this.objectUserId
      this.resetForm('form')
    },
    // 部门选择树列表
    selectDeptTree() {
      selectAllCompanyDeptTree().then(res => {
        if (res) {
          this.deptOptions = this.deleteChildren(res.data)
        } else {
          this.msgError(res.message)
        }
      })
    },
    // 查找岗位表的所有信息
    selectPostOptions() {
      listPost().then(res => {
        if (res) {
          this.postOptions = res.data.rows
        } else {
          this.msgError(res.message)
        }
      })
    },
    // 确认按钮，动态表格传输到后台
    submitFrom(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          const partId = this.userPartDeptFrom.partId
          const userPartDept = this.userPartDeptFrom
          this.btnDisabled = true
          if (partId) {
            // 更新操作
            updateUserPartDept(userPartDept).then(res => {
              if (res) {
                this.cancel()
                this.$parent.getList()
              } else {
                this.msgError(res.message)
                this.btnDisabled = false
              }
            })
          } else {
            // 添加
            // 传入后台 后台地址实现
            addUserPartDept(userPartDept).then(res => {
              if (res) {
                this.cancel()
                this.$parent.getList()
              } else {
                this.msgError(res.message)
                this.btnDisabled = false
              }
            })
          }
        }
      })
    },
    // 关闭按钮
    cancel() {
      this.open = false
      this.btnDisabled = false
      this.emptFrom()
    }
  }

}
</script>
<style  lang="scss" scoped>
  .treeselectStyle >>> .vue-treeselect__control{
      height: 32px!important;
}
.formItemCss >>> .el-form-item__content {
    line-height: 18px!important;
    font-size: 14px!important
}
</style>
